<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></head>
<body>
<script type="text/javascript" src="../js/lib/luyin.js"></script>
<script type="text/javascript" src="../js/lib/jquery.js"></script>
<div>
    <audio controls autoplay></audio>
    <input onclick="startRecording()" type="button" value="录音" />
    <input onclick="stopRecording()" type="button" value="停止" />
    <input onclick="playRecording()" type="button" value="播放" />
    <input onclick="uploadAudio()" type="button" value="提交并转文字" />
    <div id="audio-result"></div>
    <hr>
    <audio autoplay id="t2s-bar"></audio>
    <textarea id="t2s-text"></textarea>
    <button id="t2s-btn">文字到语音</button>
</div>
<script>
// $(document).ready(function() {
    $("#t2s-btn").click(function(){
        $("#t2s-bar")[0].src="text2speech?text="+$("#t2s-text")[0].value
    });
    var recorder;
    var audio = document.querySelector('audio');
    function startRecording() {
        HZRecorder.get(function (rec) {
            recorder = rec;
            recorder.start();
        });
    }
    function stopRecording() {
        recorder.stop();
    }
    function playRecording() {
        recorder.play(audio);
    }
    function uploadAudio() {

        //提交到服务器
        recorder.upload(
            "speech2text",
            function (state, e) {
                switch (state) {
                    case 'uploading':
                        //var percentComplete = Math.round(e.loaded * 100 / e.total) + '%';
                        break;
                    case 'ok':
                        //alert(e.target.responseText);
                        // alert("上传成功");
                        break;
                    case 'error':
                        alert("上传失败");
                        break;
                    case 'cancel':
                        alert("上传被取消");
                        break;
                }
            },
            function(requestFormData, response){
                console.log(response);
                // var blob = requestFormData.get("file");
                // blobURL = URL.createObjectURL(blob);
                $("#audio-result")[0].innerHTML +=
                    '<br>返回内容为：' + JSON.parse(response).data
                    // +'，音频链接为：<a href="' + blobURL + '">' + '音频blob</a>'
                ;
            }
        );
    }
// });
</script>
</body>
</html>